﻿
@model ScadaWeb.Model.ScadaGroupModel
@{
    ViewBag.Title = "EquipmentGroups";
    Layout = "~/Views/Shared/_LayoutForm.cshtml";
}
<div class="layui-row ">
    <form class="layui-form layui-form-pane ok-form">

        <input type="hidden" name="GroupId" id="GroupId" value="@Model.Id">

        @*一些不需要更新的隐藏字段*@
        <div class="layui-form-item">
            <label class="layui-form-label">模型名称</label>
            <div class="layui-input-block">
                <input type="text" name="Key" id="Key" placeholder="模型名称" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item layui-bg-cyan">
            <div class="layui-input-block">

                <button class="layui-btn btn-default" lay-submit lay-filter="search">查询</button>
                @if (ViewBag.RoleAdd)
                {
                    <button class="layui-btn  btn-success" type="button" id="add" lay-filter="add">添加模型</button>
                }
                </div>
        </div>
    </form>
</div>
<fieldset class='layui-elem-field layui-field-title' style='margin-top: 10px;'>
    <legend><i class='layui-icon'  >&#xe67a;</i>结果列表</legend>
</fieldset>
<div class="site-demo-flow layui-bg-cyan" id="groupequipmentcontent">

</div>
<div class="layui-layer-page layui-row" id="pageer"></div>

<script>

    layui.use(["form", 'element', "okLayer", "okUtils", "flow", "laypage", "util", 'layer'], function () {

        let form = layui.form;
        let okLayer = layui.okLayer;
        let okUtils = layui.okUtils;
        let laypage = layui.laypage;

        let $ = layui.$;
      var allowedit = @(ViewBag.RoleEdit?"true": "false");
        var allowdel = @(ViewBag.RoleAdd?"true": "false");
        form.on("submit(search)", function (data) {
            curr = 0;
            InitPageTool();
            return false;
        });
        var element = layui.element;
        //监听折叠
        element.on('collapse(realcard)', function (data) {

        });
        element.init();
        var curr = 0;
        var limit = 10;
        var total = 0;
        InitPageTool();
        function InitPageTool() {
            //完整功能
    laypage.render({
          elem: 'pageer'
        , count: total
        , limit: limit
        , curr: curr
        , layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip', 'count']
        , jump: function (obj, first) {
            //obj包含了当前分页的所有参数，比如：
            curr = obj.curr;
            limit = obj.limit;
            //首次不执行

            if (first) {
                curr = 0;
                limit = 10;
            }
            else {
                getEquipmentGroupList();
            }

        }
    });
        }
        function getEquipmentGroupList() {
            $.get("/Scada/ScadaEquipment/EquipmentList", { "key": $("#Key").val(), "groupid": "@Model.Id", "pageindex": curr, "pagesize": limit }, function (response) {
                total = response.count;
                InitPageTool();
                var content = $("#groupequipmentcontent");
                content.html("");//清空原来的内容
                var html = "";
                for (var i = 0; i < response.data.length; i++) {

                    html += ("<div class='layui-col-md3 layui-collapse ' lay-accordion style='padding: 5px;' lay-filter='realcard'> <div class='layui-colla-item' >");
                    html += ("   <div class='layui-colla-title' >");
                    html += ("  <div class='layui-btn-group'  style='padding-right: 10px;' >");
                    if (allowedit == true) {
                        html += ("    <button type='button' class='layui-btn layui-btn-primary  layui-btn-sm' title='编辑模型'  onclick='modeledit(\"" + response.data[i].ModelTitle + "\",\"" + response.data[i].Id + "\")'><i class='layui-icon' style='color:green' >&#xe642;</i></button>");//编辑按钮
                    }
                        if (allowdel == true) {
                        html += ("    <button type='button' class='layui-btn layui-btn-primary  layui-btn-sm' title='删除模型'   lay-filter='del' onclick='modeldel(\"" + response.data[i].ModelTitle + "\",\"" + response.data[i].Id + "\")'><i class='layui-icon'  style='color:red' >&#xe640;</i></button>");//删除按钮
                    }
                        html += ("    <button type='button' class='layui-btn layui-btn-primary  layui-btn-sm' title='查看曲线'  onclick='modelrealserie(\"" + response.data[i].ModelTitle + "\",\"" + response.data[i].Id + "\")'><i class='layui-icon'  style='color:blue' >&#xe630;</i></button>");//查看曲线
                    html += ("    <button type='button' class='layui-btn layui-btn-primary  layui-btn-sm' title='历史查询'  onclick='modelhistoryquery(\"" + response.data[i].ModelTitle + "\",\"" + response.data[i].Id + "\")'><i class='layui-icon'  style='color:black' >&#xe62d;</i></button>");//历史查询
                    html += ("    <button type='button' class='layui-btn layui-btn-primary  layui-btn-sm' title='历史曲线'  onclick='modelhistoryserie(\"" + response.data[i].ModelTitle + "\",\"" + response.data[i].Id + "\")'><i class='layui-icon'  style='color:yeelow' >&#xe629;</i></button>");//历史曲线
                    html += ("    <button type='button' class='layui-btn layui-btn-primary  layui-btn-sm' title='历史统计'  onclick='modelhistorysummaryquery(\"" + response.data[i].ModelTitle + "\",\"" + response.data[i].Id + "\")'><i class='layui-icon'  style='color:red' >&#xe60a;</i></button>");//历史查询
                    html += ("    <button type='button' class='layui-btn layui-btn-primary  layui-btn-sm' title='历史统计曲线'  onclick='modelhistorysummaryserie(\"" + response.data[i].ModelTitle + "\",\"" + response.data[i].Id + "\")'><i class='layui-icon'  style='color:blue' >&#xe60d;</i></button>");//历史曲线
                    html += ("   </div></div>");
                    html += ("   <div class='layui-colla-content  layui-show layui-bg-cyan' >");
                    html += (" <div   class='layui-form-item ' >");
                    html += ("  <fieldset class='layui-elem-field layui-field-title' style='margin-top: 10px;'>");
                    html += ("  <legend><i class='layui-icon'  style='color:yeelow' >&#xe67a;</i>" + response.data[i].ModelTitle +"</legend>");
                    html += ("</fieldset>");
                    html += ("</div>");
                    for (var e = 0; e < response.data[i].Paras.length; e++) {

                        html += (" <div   class='layui-form-item '  style='fontsize:15;' data-scadafilter='ioelement' data-iopath='" + response.data[i].ServerId + "/" + response.data[i].CommunicationId + "/" + response.data[i].DeviceId + "/" + response.data[i].Paras[e].ParaId + "/" + response.data[i].Paras[e].ParaName + "'>");//增加一个设备数量的说明
                        html += ("<div class='layui-input-inline' style='width:22%;' data-scadafilter='iotitle'><i class='layui-icon ' style='color:red' >&#xe62c;</i>&nbsp;" + response.data[i].Paras[e].ParaTitle +"</div>");
                        html += ("<div class='layui-input-inline' style='width:20%;color:@Scada.DBUtility.WebSerieColor.GetColor(4);' data-scadafilter='iovalue'>0</div>");
                        html += ("<div class='layui-input-inline' style='width:10%;color:@Scada.DBUtility.WebSerieColor.GetColor(23);' data-scadafilter='iounit'>" + response.data[i].Paras[e].ParaUnit + "</div>");
                        html += ("<div class='layui-input-inline' style='width:38%;color:@Scada.DBUtility.WebSerieColor.GetColor(43);'   data-scadafilter='iotime'>1970-01-01 00:00:00</div>");
                        if (response.data[i].Paras[e].CanWrite == 1) {

                        html += ("  <div class='layui-input-inline' style='width:5%;'> <button type='button' class='layui-btn layui-btn-primary  layui-btn-sm' title='写入命令'><i class='layui-icon'  style='color:red' >&#xe629;</i>写入</button></div>");
                        }
                        html += ("</div>");

                    }

                    html += (" <div   class='layui-form-item ' >");
                    html += ("  <fieldset class='layui-elem-field layui-field-title' style='margin-top: 10px;'>");

                    html += ("</fieldset>");
                    html += ("</div>");
                    html += (" <div class='layui-form-item'>");//增加一个设备数量的说明
                    html += ("<span style='color:@Scada.DBUtility.WebSerieColor.GetColor(67)'>"+response.data[i].Remark+"</span>");
                    html += ("   </div>");

                    html += ("  </div>");
                    html += ("   </div>");
                    html += ("  </div>");
                    html += ("  </div>");


                }
                content.html(html);
            });
        }
        getEquipmentGroupList();//
        $('#add').on('click', function () {
            okLayer.open("添加模型", "/Scada/ScadaEquipment/AddEquipment/@Model.Id", "70%", "97%", null, null);
        });

        window.modeldel = function (title, modelid) {
            okLayer.confirm("确定要删除" + title + "分组吗？", function (index) {
                layer.close(index);
                okUtils.ajax("/Scada/ScadaEquipment/DeleteEquipment", "get", { "id": modelid }, true).done(function (response) {
                    if (response.state == "success") {
                        getEquipmentGroupList();
                    }


                }).fail(function (error) {
                    console.log(error)
                });
            });
        }
        window.modeledit = function (title, modelid) {
            okLayer.open(title+"模型编辑", "/Scada/ScadaEquipment/EditEquipment/" + modelid, "70%", "97%", null, null);

        }
        window.modelrealserie = function (title, modelid) {
            okLayer.open(title + "实时曲线", "/Scada/ScadaEquipment/EquipmentRealSerie/" + modelid, "90%", "90%", null, null);

        }
        window.modelhistoryquery = function (title, modelid) {
            okLayer.open(title + "历史数据查询", "/Scada/ScadaEquipment/EquipmentHistoryQuery/" + modelid, "90%", "90%", null, null);

        }
        window.modelhistoryserie = function (title, modelid) {
            okLayer.open(title + "历史曲线", "/Scada/ScadaEquipment/EquipmentHistorySerie/" + modelid, "90%", "90%", null, null);

        }
        window.modelhistorysummaryquery = function (title, modelid) {
            okLayer.open(title + "历史数据统计查询", "/Scada/ScadaEquipment/EquipmentHistorySummaryQuery/" + modelid, "90%", "90%", null, null);

        }
        window.modelhistorysummaryserie = function (title, modelid) {
            okLayer.open(title + "历史统计曲线", "/Scada/ScadaEquipment/EquipmentHistorySummarySerie/" + modelid, "90%", "90%", null, null);

        }
        var refreshtime = "3s";//秒
        function ReadRealData(){
            var modelelements = $("[data-scadafilter='ioelement']");//获取所有要显示事件信息的图元
            var IoParas = [];
            for (var i = 0; i < modelelements.length; i++) {

                var parastr =$( modelelements[i]).data("iopath");
                if (parastr != undefined && parastr.trim() != "") {
                    IoParas.push({ ShapeID: modelelements[i].id, ServerID: parastr.split('/')[0], CommunicateID: parastr.split('/')[1], DeviceID: parastr.split('/')[2], ParaID: parastr.split('/')[3], IoName: parastr.split('/')[4] });
                }

            }
            try {
                //获取实时数据

                $.post("/Scada/ScadaEquipment/GetReadData", { IoParas }, function (result) {

                    return new Promise(resolve => {
                        $.each(result.data, function (index, value) {
                            setTimeout(function () {

                                var valueeles = $("div[data-iopath='" + value.IOEquipmentStr + "']");
                                if (valueeles != undefined) {
                                    for (var n = 0; n < valueeles.length; n++) {

                                        var valueele = $("div[data-iopath='" + value.IOEquipmentStr + "']>div[data-scadafilter='iovalue']");
                                        var timeele = $("div[data-iopath='" + value.IOEquipmentStr + "']>div[data-scadafilter='iotime']");


                                        if (valueele != undefined && valueele.length > 0) {
                                            valueele.html(value.Value);
                                            valueele.text(value.Value);

                                        }
                                        if (timeele != undefined && timeele.length > 0) {
                                            timeele.text(value.DateTime);
                                        }
                                    }

                                }

                            }, 0);
                        });

                    });

                });

            }
            catch (e) {

            }


        }
        function StartReader() {
            //设置定时器实时读取数据
            try {
                $('body').everyTime(refreshtime, function () {
                    ReadRealData();
                });
            } catch (e) { }
        }
        StartReader();

    });

</script>

